<template>
    <div>
        <el-form label-position="top">
            <el-form-item label="Carousel settings">
                <el-upload v-model:file-list="fileList" :on-preview="handlePreview"
                    :action="baseUrl + '/model/admin/upload'" method="post" list-type="picture-card" 
                    name="file" :headers="headers"
                    :on-remove="handleRemove" :on-success="successUpload">
                    <el-icon>
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>

        </el-form>
    </div>

    <el-image-viewer v-if="showImagePreview" :url-list="srcList" hide-on-click-modal @close="closePreview"
        style="z-index: 3000" />
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { baseUrl } from '@/utils/baseUrl';
import { ElMessage, type UploadProps, type UploadUserFile } from 'element-plus'
import { getHomeAPI } from '@/apis/user';
import { useUserStore } from '@/stores/userStore';
import { addHomeAPI, deleteHomeAPI } from '@/apis/admin';

const userStore = useUserStore()

const headers = {
    token: userStore.getUserInfo().token
}

const fileList = ref<UploadUserFile[]>([
    {
        name: 'food.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
    },
    {
        name: 'food.jpeg',
        url: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
    },
    {
        name: 'food.jpeg',
        url: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
    }
])

const srcList = computed(() => {
    return fileList.value.map(item => {
        return item.url
    })
})

const showImagePreview = ref(false)

const handlePreview = () => {
    // console.log(imageRef.value)
    showImagePreview.value = true
}

const closePreview = () => {
    showImagePreview.value = false
}

const successUpload = async (response: any) => {

    fileList.value[fileList.value.length - 1].url = response.data

    const res = await addHomeAPI(response.data);

    if (res.data.code === 200) {
        ElMessage.success('The upload is successful')
    }
    else {
        ElMessage.error(res.data.msg)
    }
}

const handleRemove: UploadProps['onRemove'] = async (uploadFile, uploadFiles) => {
    console.log(uploadFile)

    const res = await deleteHomeAPI(parseInt(uploadFile.name))

    if (res.data.code === 200) {
        ElMessage.success('The deletion is successful')
    }
    else {
        ElMessage.error(res.data.msg)
    }
}

const getHome = async () => {
    const res = await getHomeAPI();

    console.log(res.data.data)

    if (res.data.code === 200) {
        fileList.value = res.data.data.homes.map(item => {
            return {
                name: item.id + '',
                url: item.imageUrl
            }
        })
    }
    else {
        ElMessage.error(res.data.msg)
    }
}

onMounted(() => {
    getHome()
})
</script>

<style scoped></style>